<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城 - Xiaomi 12、Redmi K50、MIX FOLD,小米电视官方网站</title>
    <!-- 引入重置样式表 -->
    <link rel="stylesheet" href="./CSS/reset.css">
    <!-- 引入公共样式表 -->
    <link rel="stylesheet" href="./CSS/base.css">
    <!-- 引入图标字体 -->
    <link rel="stylesheet" href="./fontawesome/css/all.css">
    <!-- 引入当前页面的样式表 -->
    <link rel="stylesheet" href="./CSS/index.css">

    <!-- 设置网站的图标（在标题栏和收藏栏）
            网站图片一般都存储在网站的根目录下，名字一般叫做favicon.ico
    -->
    <link rel="icon" href="./favicon.ico">
</head>

<body>
    <!-- 创建顶部导航条 -->
    <div class="top-navigation-bar">
        <!-- 创建内部容器 -->
        <div class="tnb-inner w">
            <!-- 创建左侧导航条 -->
            <div class="tnb-left">
                <ul>
                    <li><a href="#">小米官网</a></li>
                    <li class="line">|</li>
                    <li><a href="#">小米商城</a></li>
                    <li class="line">|</li>
                    <li><a href="#">MIUI</a></li>
                    <li class="line">|</li>
                    <li><a href="#">loT</a></li>
                    <li class="line">|</li>
                    <li><a href="#">云服务</a></li>
                    <li class="line">|</li>
                    <li><a href="#">天星数科</a></li>
                    <li class="line">|</li>
                    <li><a href="#">有品</a></li>
                    <li class="line">|</li>
                    <li><a href="#">小爱开放平台</a></li>
                    <li class="line">|</li>
                    <li><a href="#">企业团购</a></li>
                    <li class="line">|</li>
                    <li><a href="#">资质证照</a></li>
                    <li class="line">|</li>
                    <li><a href="#">协议规则</a></li>
                    <li class="line">|</li>
                    <li>
                        <a class="app" href="#">
                            下载app
                            <!-- 创建弹出框的二维码 -->
                            <div class="qrcode">
                                <img src="./img/miApp-qrcode.png" alt="">
                                <span>小米商城APP</span>
                            </div>
                        </a>
                    </li>
                    <li class="line">|</li>
                    <li><a href="#">Select Location</a></li>
                </ul>
            </div>
            <!-- 创建右侧的购物车 -->
            <div class="tnb-r-cart">
                <a href="#">
                    <i class="fas fa-shopping-cart"></i>
                    购物车 (0)
                </a>
                <!-- 创建购物车具体弹窗信息 -->
                <div class="cart-info">
                    <div>购物车中还没有商品，赶紧选购吧！</div>
                </div>
            </div>
            <!-- 创建右侧的三个小导航条 -->
            <div class="tnb-right-user">
                <ul>
                    <li><a href="#">登录</a></li>
                    <li class="line">|</li>
                    <li><a href="#">注册</a></li>
                    <li class="line">|</li>
                    <li><a href="#">消息通知</a></li>
                </ul>
            </div>

        </div>
    </div>

    <!-- 创建头部外部容器 -->
    <div class="head-wrapper">
        <!-- 创建内部容器 -->
        <div class="in-head w">
            <!-- 创建左侧的logo -->
            <div class="left-logo" title="小米官网">
                <a href="https://www.mi.com"></a>
            </div>

            <!-- 创建中间的导航栏 -->
            <div class="midden-list ">
                <ul class="menu">
                    <li class="ex">
                        <a href="#">全部商品分类</a>
                        <!-- 创建左侧菜单 -->
                        <ul class="left-menu">
                            <li>
                                手机
                                <i class="fas fa-angle-right"></i>
                            </li>
                            <li>
                                电视
                                <i class="fas fa-angle-right"></i>
                            </li>
                            <li>
                                笔记本 平板
                                <i class="fas fa-angle-right"></i>
                            </li>
                            <li>
                                出行 穿戴
                                <i class="fas fa-angle-right"></i>
                            </li>
                            <li>
                                耳机 音响
                                <i class="fas fa-angle-right"></i>
                            </li>
                            <li>
                                家电
                                <i class="fas fa-angle-right"></i>
                            </li>
                            <li>
                                智能 路由器
                                <i class="fas fa-angle-right"></i>
                            </li>
                            <li>
                                电源 配件
                                <i class="fas fa-angle-right"></i>
                            </li>
                            <li>
                                健康 儿童
                                <i class="fas fa-angle-right"></i>
                            </li>
                            <li>
                                生活 箱包
                                <i class="fas fa-angle-right"></i>
                            </li>
                        </ul>
                    </li>
                    <li class="now">
                        <a href="#">Xiaomi手机</a>
                    </li>
                    <li class="now">
                        <a href="#">Redmi手机</a>
                    </li>
                    <li class="now">
                        <a href="#">电视</a>
                    </li>
                    <li class="now">
                        <a href="#">笔记本</a>
                    </li>
                    <li class="now">
                        <a href="#">平板</a>
                    </li>
                    <li class="now">
                        <a href="#">家电</a>
                    </li>
                    <li class="now">
                        <a href="#">路由器</a>
                    </li>
                    <li>
                        <a href="#">服务中心</a>
                    </li>
                    <li>
                        <a href="#">社区</a>
                    </li>

                    <!-- 创建菜单的弹出层 -->
                    <div class="menu-list">

                    </div>
                </ul>
            </div>

            <!-- 创建右侧的搜索框的容器 -->
            <div class="right-research">
                <!-- 创建主输入框和按钮 -->
                <form class="research" action="#">
                    <input class="search-inp" type="search-inp">
                    <button class="search-btn">
                        <i class="fas fa-search"></i>
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- 创建中间的轮播图 -->
    <div class="banner-wrapper w">
        <div class="banner">
            <!-- 创建轮播图 -->
            <ul class="img-list">
                <li >
                    <a  href="#">
                        <img src="./img/banner1.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./img/banner2.webp" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./img/banner3.webp" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./img/banner4.webp" alt="">
                    </a>
                </li>
            </ul>
            <!-- 创建右下角四个点 -->
            <div class="pointer">
                <a class="active" href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
            </div>
            <!-- 创建轮播图左右箭头 -->
            <div class="bef-aft">
                <a class="bef" href="#"></a>
                <a class="aft" href="#"></a>
            </div>
        </div>
    </div>

    <!-- 设置一个回到顶部的导航条 -->
    <div class="to-top">
        <ul>
            <li class="mobile-qr-wrapper">
                <a href="#">
                    <i class="fas fa-mobile" aria-hidden="true"></i>
                </a>
                <!-- 创建弹出二维码 -->
                <div class="mobile-qr">
                    <div class="text-one">
                        扫码领取新人百元礼包
                    </div>
                    <!-- 创建弹出小三角 -->
                    <div class="triangle-first">

                    </div>
                </div>
            </li>
            <li>
                <a href="#">
                    <i class="fas fa-user"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fas fa-wrench"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fa-solid fa-headphones"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fas fa-cart-shopping"></i>
                </a>
            </li>
        </ul>
    </div>

    <!-- 创建广告容器 -->
    <div class="ad w">
        <ul class="shortcut">
            <li>
                <a href="#">
                    <i class="fas fa-clock"></i>
                    小米秒杀
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fas fa-building"></i>
                    企业团购
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fas fa-frog"></i>
                    F码通道
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fas fa-robot"></i>
                    米粉卡
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fas fa-keyboard"></i>
                    以旧换新
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fas fa-sim-card"></i>
                    话费充值
                </a>
            </li>
        </ul>
        <!-- 三个广告图 -->
        <ul class="ad-img">
            <li>
                <a href="#">
                    <img src="./img/ad1.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./img/ad2.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./img/ad3.jpg" alt="">
                </a>
            </li>
        </ul>
    </div>
</body>

</html>